<div class="ant-form-item-control" [ngClass]="controlClassMap">
  <span class="ant-form-item-children">
    <ng-content></ng-content>
    <span class="ant-form-item-children-icon">
      <i *ngIf="nzHasFeedback && iconType" nz-icon [nzType]="iconType"></i>
    </span>
  </span>
  <div
    class="ant-form-explain"
    *ngIf="showSuccessTip || showWarningTip || showErrorTip || showValidatingTip"
  >
    <div @helpMotion>
      <ng-container *ngIf="showSuccessTip">
        <ng-container
          *nzStringTemplateOutlet="nzSuccessTip; context: { $implicit: validateControl }"
          >{{ nzSuccessTip }}</ng-container
        >
      </ng-container>
      <ng-container *ngIf="showWarningTip">
        <ng-container
          *nzStringTemplateOutlet="nzWarningTip; context: { $implicit: validateControl }"
          >{{ nzWarningTip }}</ng-container
        >
      </ng-container>
      <ng-container *ngIf="showErrorTip">
        <ng-container
          *nzStringTemplateOutlet="nzErrorTip; context: { $implicit: validateControl }"
          >{{ nzErrorTip }}</ng-container
        >
      </ng-container>
      <ng-container *ngIf="showValidatingTip">
        <ng-container
          *nzStringTemplateOutlet="nzValidatingTip; context: { $implicit: validateControl }"
          >{{ nzValidatingTip }}</ng-container
        >
      </ng-container>
    </div>
  </div>
  <ng-content *ngIf="!hasTips" select="nz-form-explain"></ng-content>
  <ng-content *ngIf="!nzExtra" select="nz-form-extra"></ng-content>
  <div class="ant-form-extra" *ngIf="nzExtra">
    <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
  </div>
</div>
